<template>
  <div class="container">
    <div class="table-page-search-wrapper">
      <a-card :bordered="false">
        <div class="title">{{ detail.organizationName }}<span>{{ detail.socialOrganizationType }}</span></div>
        <div class="info">
          <div class="info_left">
            <div>创建人：{{ detail.createUserName }}</div>
            <div>创建时间：{{ detail.createTime }}</div>
            <!-- <div>生效时间：{{ detail.startDate }}</div> -->
            <div>
              <span>合并文件：</span>
              <span class="info_left_upload" @click="handleUpload">下载并合并文件</span>
              <span>提示:所有材料上传无误后，再进行下载</span>
            </div>
          </div>
          <div class="info_right">
            <div style="display:flex;align-items:center"><span style="margin-right:20px">填报进度</span><Slider id="test" :value="detail.recordCount / detail.managementCount * 100|| 0" :disabled="true" style="flex:1" /></div>
            <div class="info_right_score_container">
              <div class="info_right_score">
                <span>{{ detail.recordSelfScoreSum }}</span>
                <span>自评得分</span>
              </div>
              <div class="info_right_score">
                <span>{{ detail.passMark }}</span>
                <span>及格分数</span>
              </div>
              <div class="info_right_score">
                <span>{{ detail.declarationlevel }}</span>
                <span>申请级别</span>
              </div>
              <div class="info_right_score">
                <span><span style="color: #0084fe">{{ detail.recordScoreZhidaoSum || 0 }}</span></span
                >
                <span>指导得分</span>
              </div>
              <!-- <div class="info_right_score">
                <span>{{ detail.score || 0 }}</span>
                <span>专家打分</span>
              </div> -->
            </div>
          </div>
        </div>
      </a-card>
      <div style="margin-top:16px;display:flex;">
        <div class="tree">
          <a-input-search style="margin-bottom: 20px" v-model="searchValue" allowClear placeholder="请输入" @change="onChange">
          </a-input-search>
          <Tree
            v-if="showTree"
            :tree-data="orgTree"
            :auto-expand-parent="autoExpandParent"
            defaultExpandAll
            @select="confirmSelect"
            :defaultSelectedKeys="defaultSelectedKeys"
          >
            <template slot="title" slot-scope="{ title }">
              <span>{{ title }}</span>
            </template>
          </Tree>
        </div>
        <div class="content">
          <div class="status_container">
            <div class="status">
              <div>
                填报状态
              </div>
              <div class="status_list">
                <div v-for="(item,index) in statusList" :key="index" :class="current==index?'active_status':''" @click="handleChange(item,index)">
                  {{ item }}
                  <img src="@/assets/right.png" alt="" v-if="current==index">
                </div>
              </div>
              <!-- <div style="margin:0 5px">专家批注：{{ detail.annotations }}</div> -->
              <!-- <div>得分：{{ detail.score || 0 }}</div> -->
            </div>
            <div class="status">
              <div>
                审核状态
              </div>
              <div class="status_list">
                <div v-for="(item,index) in auditList" :key="index" :class="current1==index?'active_status':''" @click="handleChange1(item,index)">
                  {{ item }}
                  <img src="@/assets/right.png" alt="" v-if="current1==index">
                </div>
              </div>
            </div>
          </div>
          <div class="audit_list" v-if="dataListCopy.length">
            <div v-for="(item,index) in dataListCopy" :key="index" @click="toWrite(item)">
              <div class="status">
                <img src="@/assets/yitianxie.png">
                <div>填报状态：{{ item.submitStatus == 2 ? "已填报" : "未填报" }}</div>
              </div>
              <div style="width:100px">{{ item.target }}</div>
              <div class="item"><span>总分</span><span>{{ item.totalPoint }}</span></div>
              <div class="item"><span>自评得分</span><span>{{ item.selfScore }}</span></div>
              <div class="item"><span>指导得分</span><span>{{ item.scoreZhidao }}</span></div>
              <img class="approve_reject" src="@/assets/no_audit.png" alt="" v-if="!item.scoreZhidao && item.targetDeclarationRecordId">
              <img class="approve_reject" src="@/assets/yishenghe.png" alt="" v-else-if="item.scoreZhidao">
              <div class="write" v-if="item.submitStatus==1"><a-button type="primary" @click="visible=true">填写申报</a-button></div>
            </div>
          </div>
          <div class="no_data" v-else>暂无数据</div>
        </div>
      </div>
    </div>
    <write-model
      ref="writeModel"
      :visible="visible"
      :loading.sync="confirmLoading"
      @cancel="handleCancel"
      @ok="handleOk"
      :status="status">
    </write-model>
    <a-modal
      :visible="uploadVisible"
      title="下载"
      :body-style="{ padding: '24px 40px 10px' }"
      okText="导出"
      @ok="getAllFile"
      @cancel="uploadVisible = false"
    >
      <!-- <a-input-search
        class="search"
        v-model="searchTarget"
        allowClear
        placeholder="搜索指标"
        @search="changeTarget"
        enter-button="搜索"
      >
      </a-input-search> -->
      <el-input
        placeholder="搜索指标"
        v-model="searchTarget"
        clearable
        @clear="handleSearch"
      >
        <el-button slot="append" @click="handleSearch">搜索</el-button>
      </el-input>
      <a-form ref="form" :model="form" layout="vertical">
        <a-form-item label="请勾选要导出的指标:" required style="margin-top:8px">
          <div class="tree_container">
            <!-- <a-tree
              v-model:checkedKeys="checkedKeys"
              v-if="targetTree && targetTree.length"
              :tree-data="targetTree"
              defaultExpandAll
              checkable
            >
              <template slot="title" slot-scope="{ title }">
                <span>{{ title }}</span>
              </template>
            </a-tree> -->
            <a-spin :spinning="treeLoading">
              <el-tree
                class="filter-tree"
                show-checkbox
                :data="targetTree"
                :props="defaultProps"
                node-key="key"
                default-expand-all
                :filter-node-method="filterNode"
                ref="tree"
              >
              </el-tree>
            </a-spin>
          </div>
        </a-form-item>
      </a-form>
      <div style="color:#666"><a-icon type="info-circle" style="color:#faad14" /> 勾选的指标及内容将被导出,未勾选的不会导出</div>
    </a-modal>
  </div>
</template>

<script>
import { Tree, Slider } from 'ant-design-vue'
import WriteModel from './WriteModel'
import {
  getTree,
  getDeclarationInfoDetail,
  getTargetDeclarationRecordList,
  submitDeclare,
  getTargetDeclarationRecordDetail,
  editDeclare,
  getTargetManagement,
  getFiles,
  getFilesBefore,
  getAllFile
} from '@/api/case'
import axios from 'axios'
export default {
  name: 'Detail',
  components: {
    Tree,
    Slider,
    WriteModel
  },
  data () {
    return {
      showTree: false, // 是否展示树
      status: '', // 审核状态 0 未审核 1 已审核
      current: 0, // 填报状态样式
      current1: 0, // 审核状态样式
      searchValue: '', // 搜索关键字
      autoExpandParent: true, // 父节点是否展开
      defaultSelectedKeys: [], // 默认选中节点
      dataList: [], // 指标数据
      dataListCopy: [], // 指标数据
      statusList: [
        '全部', '未填报', '已填报'
      ], // 填报状态
       auditList: [
        '全部', '未审核', '已审核'
      ], // 审核状态
      orgTree: [], // 树
      // 查询参数
      queryParam: {
        submitStatus: '', // 填报状态 1 未填报 2 已填报
        auditStatus: '' // 审核状态 1 未审核 2 已审核
      },
      visible: false, // 填写申报弹窗
      confirmLoading: false, // 填写申报弹窗确定按钮loading
      detail: {}, // 上方详情数据
      targetManagementIdList: [], // 点击时左侧树节点及下级节点的id集合
      id: '', // 指标id
      targetDeclarationRecordId: '', // 填报id
      enterInfo: JSON.parse(localStorage.getItem('enterInfo')),
      uploadVisible: false,
      form: {},
      searchTarget: '',
      targetTree: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      treeLoading: true
    }
  },
  mounted () {
    this.getTree()
    this.getDetail()
    this.getTargetDeclarationRecordList()
    this.getTargetTree()
  },
  watch: {
    searchTarget (val) {
      if (!val) {
        this.$refs.tree.filter(val)
      }
    }
  },
  methods: {
    handleSearch () {
      this.$refs.tree.filter(this.searchTarget)
    },
    filterNode (value, data) {
      if (!value) return true
      return data.title.indexOf(value) !== -1
    },
    getIdsById (id, tree) {
      const node = this.findNodeById(id, tree) // 根据id查找对应的节点
      if (node) {
        return this.getAllIds(node) // 返回当前节点下的所有子节点id集合
      }
      return []
    },

    findNodeById (id, tree) {
      for (const node of tree) {
        // 遍历数组中的每一个节点
        if (node.key === id) {
          return node // 如果当前节点的id与指定id匹配，则返回当前节点
        }
        if (node.children) {
          // 如果当前节点有子节点
          const result = this.findNodeById(id, node.children) // 递归查找子节点
          if (result) {
            return result // 如果找到了匹配的节点，则返回该节点
          }
        }
      }
      return null // 如果未找到匹配的节点，则返回null
    },
    getAllIds (node) {
      const ids = [node.key] // 将当前节点的id添加到集合中
      if (node.children) {
        // 如果当前节点有子节点
        for (const child of node.children) {
          // 遍历所有子节点
          ids.push(...this.getAllIds(child)) // 递归获取子节点的id并添加到集合中
        }
      }
      return ids
    },
    // 树
    getTree () {
      getTree({
        target: this.searchValue,
        socialOrganizationTypeId: this.enterInfo.socialOrganizationTypeId || ''
      }).then(res => {
        // console.log(res)
        this.orgTree = res
        const ass = (data) => {
          const item = []
          data.map((list, i) => {
            const newData = {}
            newData.key = list.id
            newData.parentId = list.parentId
            newData.title = list.target
            newData.children = list.childs ? ass(list.childs) : [] // 如果还有子集，就再次调用自己
            item.push(newData)
          })
          return item
        }
        this.orgTree = ass(this.orgTree)
        this.orgTree = this.getLeaf(this.orgTree)
        this.showTree = true
        // console.log(this.orgTree)
      })
    },
    // 树
    getTargetTree () {
      getTree({
        target: '',
        socialOrganizationTypeId: this.enterInfo.socialOrganizationTypeId || ''
      }).then(res => {
        // console.log(res)
        this.targetTree = res
        this.treeLoading = false
        const ass = (data) => {
          const item = []
          data.map((list, i) => {
            const newData = {}
            newData.key = list.id
            newData.parentId = list.parentId
            newData.title = list.target
            newData.children = list.childs ? ass(list.childs) : [] // 如果还有子集，就再次调用自己
            item.push(newData)
          })
          return item
        }
        this.targetTree = ass(this.targetTree)
        // this.targetTree = this.getCheckedable(this.targetTree)
      })
    },
    getLeaf (data) {
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].cj === 4) {
          data[i].isLeaf = true
        } else if (data[i].children && data[i].children.length > 0) {
          data[i].disabled = true
          data[i].children = this.getLeaf(data[i].children)
        }
      }
      return data
    },
    getCheckedable (data) {
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].targetDeclarationRecordId) {
          data[i].disabled = false
        } else if (data[i].children && data[i].children.length > 0) {
          data[i].disabled = true
          data[i].children = this.getCheckedable(data[i].children)
        } else {
          data[i].disabled = true
        }
      }
      return data
    },
    // 上方详情数据
    getDetail () {
      getDeclarationInfoDetail(this.enterInfo.declarationInfoId).then(res => { this.detail = res })
    },
    // 指标列表
    getTargetDeclarationRecordList () {
      getTargetDeclarationRecordList({
        target: this.searchValue,
        size: 9999,
        current: 1,
        declarationInfoId: this.enterInfo.declarationInfoId,
        targetManagementIdList: this.targetManagementIdList // 左侧树节点
      }).then((res) => {
        // console.log('res===', res)
        this.dataList = res.records
        this.dataListCopy = res.records
        this.filterList()
      })
    },
    // 下载合并文件
    handleUpload () {
      this.searchTarget = ''
      this.uploadVisible = true
      this.filterNode('', this.targetTree)
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([])
      })
      // getAllFile({ id: this.enterInfo.declarationInfoId }).then((res) => {
      //   console.log(res)
      //   if (res && res.url) {
      //     const link = document.createElement('a')
      //     // 创建一个a标签
      //     link.style.display = 'none'
      //     // 将a标签隐藏
      //     link.href = res.url
      //     console.log(res.original)
      //     // 给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
      //     link.setAttribute('download', res.original)
      //     // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
      //     document.body.appendChild(link)
      //     // 将上面创建的a标签加入到body的尾部
      //     link.click()
      //   } else {
      //     this.$message.info('暂无可下载的文件！')
      //   }
      // })
    },
    // 搜索关键字
    onChange () {
      this.getTree()
      this.getTargetDeclarationRecordList()
    },
    changeTarget () {
      getTree({
        target: this.searchTarget,
        socialOrganizationTypeId: this.enterInfo.socialOrganizationTypeId || ''
      }).then(res => {
        // console.log(res)
        this.targetTree = res
        const ass = (data) => {
          const item = []
          data.map((list, i) => {
            const newData = {}
            newData.key = list.id
            newData.parentId = list.parentId
            newData.title = list.target
            newData.children = list.childs ? ass(list.childs) : [] // 如果还有子集，就再次调用自己
            item.push(newData)
          })
          return item
        }
        this.targetTree = ass(this.targetTree)
      })
    },
    filterList () {
      if (
        this.queryParam.submitStatus === '' &&
        this.queryParam.auditStatus === ''
      ) {
        this.dataListCopy = this.dataList
      } else if (
        this.queryParam.submitStatus === '' &&
        this.queryParam.auditStatus === 1
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) => item.scoreZhidao === null && item.targetDeclarationRecordId
        )
      } else if (
        this.queryParam.submitStatus === '' &&
        this.queryParam.auditStatus === 2
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) => item.scoreZhidao && item.targetDeclarationRecordId
        )
      } else if (
        this.queryParam.submitStatus === 1 &&
        this.queryParam.auditStatus === ''
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) => item.submitStatus === 1
        )
      } else if (
        this.queryParam.submitStatus === 1 &&
        this.queryParam.auditStatus === 1
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) =>
            item.submitStatus === 1 &&
            item.scoreZhidao === null &&
            item.targetDeclarationRecordId
        )
      } else if (
        this.queryParam.submitStatus === 1 &&
        this.queryParam.auditStatus === 2
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) =>
            item.submitStatus === 1 &&
            item.scoreZhidao &&
            item.targetDeclarationRecordId
        )
      } else if (
        this.queryParam.submitStatus === 2 &&
        this.queryParam.auditStatus === ''
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) => item.submitStatus === 2
        )
      } else if (
        this.queryParam.submitStatus === 2 &&
        this.queryParam.auditStatus === 1
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) =>
            item.submitStatus === 2 &&
            item.scoreZhidao === null &&
            item.targetDeclarationRecordId
        )
      } else if (
        this.queryParam.submitStatus === 2 &&
        this.queryParam.auditStatus === 2
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) =>
            item.submitStatus === 2 &&
            item.scoreZhidao &&
            item.targetDeclarationRecordId
        )
      }
    },
    handleChange (data, index) {
      // console.log(data)
      this.current = index
      switch (index) {
        case 0:
          this.queryParam.submitStatus = ''
        break
        case 1:
          this.queryParam.submitStatus = 1
        break
        case 2:
          this.queryParam.submitStatus = 2
        break
      }
      // this.getTargetDeclarationRecordList()
      this.filterList()
    },
    handleChange1 (data, index) {
      // console.log(data)
      this.current1 = index
      switch (index) {
        case 0:
          this.queryParam.auditStatus = ''
        break
        case 1:
          this.queryParam.auditStatus = 1
        break
        case 2:
          this.queryParam.auditStatus = 2
        break
      }
      // this.getTargetDeclarationRecordList()
      this.filterList()
    },
    // 左侧指标数点击
    confirmSelect (selectedKeys, e) {
      // this.targetManagementIdList = this.getIdsById(
      //   selectedKeys[0],
      //   this.orgTree
      // )
      this.targetManagementIdList = selectedKeys
      this.getTargetDeclarationRecordList()
    },
    // 填写指标内容取消
    handleCancel () {
      this.visible = false
    },
    handleOk () {
      if (this.$refs.writeModel.queryParam.selfScore !== 0 && !this.$refs.writeModel.queryParam.selfScore) {
        this.$message.error('自评得分不可为空')
      } else if (!this.$refs.writeModel.fileList.length &&
            this.$refs.writeModel.files.length) {
        this.$message.error('填报文件不能为空')
      } else {
        this.confirmLoading = true
        // 如果有填报id说明之前填写过 走编辑流程 否则走新增流程
        if (this.targetDeclarationRecordId) {
          let files
          if (
            this.$refs.writeModel.fileList.length &&
            this.$refs.writeModel.files.length
          ) {
            files = this.$refs.writeModel.files.concat(
              this.$refs.writeModel.fileListBefore
            )
          } else if (
            this.$refs.writeModel.fileList.length &&
            !this.$refs.writeModel.files.length
          ) {
            files = this.$refs.writeModel.fileListBefore
          } else if (
            !this.$refs.writeModel.fileList.length &&
            this.$refs.writeModel.files.length
          ) {
            files = this.$refs.writeModel.files
          }
          // 编辑
          editDeclare({
            id: this.targetDeclarationRecordId, // 填报id
            targetManagementId: this.id, // 指标id
            declarationInfoId: this.enterInfo.declarationInfoId, // 申报id
            selfScore: this.$refs.writeModel.queryParam.selfScore, // 自评得分
            comment: this.$refs.writeModel.queryParam.comment, // 备注说明
            files
            // files: this.$refs.writeModel.files.concat(this.$refs.writeModel.fileList, this.$refs.writeModel.fileListBefore) // 文件
          }).then((res) => {
            this.confirmLoading = false
            // console.log('editRes===', res)
            this.$message.success('修改成功')
            this.visible = false
            this.getTargetDeclarationRecordList()
          }).catch(() => { this.confirmLoading = false })
        } else {
          // 新增
          submitDeclare({
            targetManagementId: this.id,
            declarationInfoId: this.enterInfo.declarationInfoId,
            selfScore: this.$refs.writeModel.queryParam.selfScore,
            comment: this.$refs.writeModel.queryParam.comment,
            files: this.$refs.writeModel.files
          }).then((res) => {
            // console.log('res===', res)
            this.confirmLoading = false
            this.$message.success('填报成功')
            this.visible = false
            this.getTargetDeclarationRecordList()
          }).catch(() => { this.confirmLoading = false })
        }
      }
    },
    // 确认提交
    handleSubmit () {
    },
    // 填写
    toWrite (data) {
      // this.status = data.auditStatus
      this.status = this.enterInfo.status
      this.visible = true
      this.id = data.id
      this.targetDeclarationRecordId = data.targetDeclarationRecordId
      this.$refs.writeModel.files = []
      this.$refs.writeModel.form.resetFields()
      // 指标详情(说明 被查资料)
      getTargetManagement(data.id).then(res => {
        this.$refs.writeModel.targetManagement = res
      })
      if (data.targetDeclarationRecordId) {
        // 获取合并文件
        getFiles(data.targetDeclarationRecordId).then((res) => {
          this.$refs.writeModel.fileList = []
          // console.log('files===', res)
          if (res) this.$refs.writeModel.fileList.push(res)
        })
        // 获取历史文件
        getFilesBefore(data.targetDeclarationRecordId).then((res) => {
          // console.log('filesBefore===', res)
          this.$refs.writeModel.fileListBefore = res
        })
        // 获取指标填报详情
        getTargetDeclarationRecordDetail(data.targetDeclarationRecordId).then((res) => {
          // console.log('writeInfo====', res)
          this.$refs.writeModel.queryParam.selfScore =
            (res && res.selfScore) || ''
          this.$refs.writeModel.queryParam.comment =
            (res && res.comment) || ''
          this.$refs.writeModel.replyList =
            (res && res.replyList) || []
        })
      } else {
        this.$refs.writeModel.queryParam.selfScore = ''
        this.$refs.writeModel.queryParam.comment = ''
        this.$refs.writeModel.fileList = []
        this.$refs.writeModel.replyList = []
      }
    },
    deleteFile (index) {
      this.files.splice(index, 1)
    },
    selectTargets (data) {
      // console.log(data)
      this.targetManagementIds = data
    },
    getAllFile () {
      if (!this.$refs.tree.getCheckedKeys().length) {
        return this.$message.error('请勾选需要导出的指标')
      }
      getAllFile({ id: this.enterInfo.declarationInfoId, targetManagementIds: this.$refs.tree.getCheckedKeys() }).then((res) => {
        // console.log(res)
        if (res && res.url) {
          axios
            .get(res.url, {
              responseType: 'blob' // 注意返回数据类型
            })
            .then((res1) => {
              const url = window.URL.createObjectURL(res1.data)
              const linkElement = document.createElement('a') // 创建点击下载的元素
              linkElement.setAttribute('href', url)
              linkElement.setAttribute('downLoad', res.original)
              linkElement.click()
            })
        } else {
          this.$message.info('暂无可下载的文件！')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  font-family: Microsoft YaHei;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  .title{
    font-size: 16px;
    font-weight: bold;
    span{
      font-size: 14px;
      font-weight: normal;
      margin-left: 17px;
      color: rgba(153, 153, 153, 0.85);
    }
  }
  .info {
    display: flex;
    margin-top: 26px;
    .info_left {
      display: flex;
      width: 70%;
      justify-content: space-between;
    div:last-child {
      display: flex;
      flex-direction: column;
      .info_left_upload{
        color: #0084FE;
        cursor: pointer;
      }
    }
    }
    .info_right {
      margin-left: 5.3%;
      .info_right_score_container {
        margin-top: 19px;
        display: flex;
        .info_right_score {
          margin-right: 16px;
          padding: 15px 0;
          text-align: center;
          background: #E5ECFF;
          display: flex;
          flex-direction: column;
          font-size: 14px;
          width: 100px;
          border-radius: 4px;
        span {
          line-height: 11px;
        }
        span:last-child {
          margin-top: 9px;
          line-height: 12px;
        }
      }
    }
    }
  }
  .tree {
    background: #fff;
    width: 19%;
    padding: 19px 16px 0 21px;
    height: calc(100vh - 268px);
    overflow-y: scroll;
  }
  .content {
    flex: 1;
    margin-left: 15px;
    height: calc(100vh - 268px);
    overflow-y: scroll;
    .status_container{
      display: flex;
      padding: 18px 10px 18px 37px;
      align-items: center;
      background: #fff;
      justify-content: space-between;
      .status {
      display: flex;
      align-items: center;
      .status_list {
        display: flex;
        margin-left: 20px;
        & > div {
          border-radius: 4px;
          margin-right: 10px;
          position: relative;
          background: #fff;
          border: 1px solid #D9D9D9;
          width: 80px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          cursor: pointer;
          img {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 17px;
            height: 17px;
          }
        }
        .active_status {
          border: 1px solid #0084FE;
          background: #EDF3FF;
          box-shadow: 0px 0px 8px 0px rgba(13,13,13,0.05);
          color: #0084FE;
        }
      }
    }
    }
    .audit_list {
      & > div {
        background: #fff;
        position: relative;
        margin-top: 15px;
        padding: 24px 0 34px 11.1%;
        display: flex;
        align-items: center;
        box-shadow: 0px 0px 8px 0px rgba(13,13,13,0.05);
        .item {
          display: flex;
          flex-direction: column;
          color: #999;
          &:nth-child(n+2) {
            margin-left: 13%;
          }
          span:last-child {
            margin-top: 13px;
            color: #000;
          }
        }
        .approve_reject {
          margin-left: 22.3%;
          width: 92px;
          height: 70px;
        }
        .write {
          margin-left: 22.3%;
        }
        .status {
          position: absolute;
          top: 0;
          left: 0;
          img {
            width: 138px;
            height: 25px;
          }
          div {
            color: #fff;
            font-size: 12px;
            position: absolute;
            left: 12px;
            top: 5px;
          }
        }
      }

    }
  }
}
::v-deep {
  .ant-input {
    border-radius: 19px;
  }
  .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background:#1890ff;
    color: #fff;
    .selected {
    color: #fff !important;
  }
  }
  .ant-slider-rail {
    background: #eff0f2 !important;
  }
  .ant-slider-track {
    background: #4674F6 !important;
  }
  .ant-slider-handle {
    border: 3px solid #FFFFFF !important;
    box-shadow: 0px 3px 8px 0px rgba(38,65,153,0.25) !important;
    background: #4674F6 !important;
  }
  .ant-form-item {
    margin-bottom: 0;
  }
  .el-button {
    background: #1890ff !important;
    color: #fff !important;
    border-radius: 0 !important;
  }
}
.no_data {
  color: #666;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
}
.tree_container {
  border: 1px solid #e8e8e8;
  height: 500px;
  overflow-y: scroll;
}
.search {
  ::v-deep .ant-input {
    border-radius: 0;
  }
}
</style>
